{% load staticfiles %}
<!DOCTYPE    html    PUBLIC    "-//W3C/DTD    XHTML    1.0    Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
  <head>
    <title>cssabc</title>
    <link rel="stylesheet" href="{% static 'polls/css/css1.css' %}" >
  </head>
  <body>
    <div id="container">
      <div id="header">
        <div id="logo">
        </div>
        <div id="menu">
          <ul>
            <li><a href="#">首页</a></li>
            <li class="menudiv"></li>
            <li><a href="#">博客</a></li>
            <li class="menudiv"></li>
            <li><a href="#">分类</a></li>
            <li class="menudiv"></li>
            <li><a href="#">音乐</a></li>
            <li class="menudiv"></li>
            <li><a href="#">关于</a></li>
            <li id="markself">www.example.com</li>
          </ul>
        </div>
      </div>
      <div id="pagebody">
        <div id="sidebar">

        </div>

        <div id="mainbody">
          <form action="{% url 'polls:css_post' %}" method="POST"> {% csrf_token %}
            <input name="username" value="" type="text" /> <br />
            <input name="project" value="english" type="checkbox" />english <br />
            <input name="project" value="computer" type="checkbox" />computer <br />
            <input name="submit" value="confirm" type="submit" />
          </form>

          <p class="warning urgent">When handling pultonium, care must be taken to avoid the formation of a critical mass.</p>
          <p>With pultonium, <span class="warning">the possibility of implosion is very real, and must be avoided at all costs</span>. This can be accomplished by keeping the various masses separate.</p>
          <ol>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
          </ol>This is some text that is part of the 'div'.
          <ul>
            <li>A list item.</li>
            <li>Another list item.</li>
            <li>Yet another list item.</li>
          </ul>
          <ul>
            <li>ul li 1</li>
            <li>ul li 2</li>
            <li>ul li 3</li>
          </ul>
          <h1>here is h1</h1>
          <p class="p1">brother 1 of h1</p>
          <p	class="p2">brother 2 of h1</p>
          <script>
           function popupMsg(msg){
             alert(msg);
           }
          </script> 
          <a href="javascript:;" onclick="popupMsg('空链接')">空链接</a>
	  <a href="javascript:window.open('about:blank');" >空链接</a>
	  <form action="#">
	    <p>
	      <label for="x">Number</label>
	      <input id="x1" name="x1" type="number" />
	    </p>
            <input id="submit" type="submit" value="计算平方" />
            <script>
             var submit = document.getElementById("submit");
             submit.parentNode.removeChild(submit);
             var x = document.getElementById("x1");
             var output = document.createElement("p");
             x.form.appendChild(output);
             x.oninput = function() {
               var v = x.valueAsNumber;
               if (v) {
                 output.textContent = v + "的平方是：" + v * v;
               } else {
                 output.textContent = "你输入的不正确，\n\r无法计算";
               }
             };
            </script>
          </form>

        </div>
      </div>

      <div id="footer">

      </div>

    </div>
  </body>
</html>